<template>
  <div class="m-4">
    <div class="relative p-5 rounded-lg mb-1.5" style="background-color: #f5f5f5;">
      <div class="absolute inset-0" style="background-image: url('/img/index_banner.png'); background-size: cover; background-position: center;"></div>
      <div class="relative z-10">
        <h3 class="font-bold text-lg">品质套餐</h3>
        <p class="text-sm text-gray-600 mt-1">搭配套餐 吃得好</p>
        <a href="#" class="text-orange-400 text-sm mt-2 inline-block">立即抢购 ></a>
      </div>
    </div>


    <div class="bg-orange-100 p-4.5 rounded-lg flex justify-between items-center mb-5">
      <div class="flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M5 20v-2h14v2zm0-3.5L3.725 8.475q-.05 0-.113.013T3.5 8.5q-.625 0-1.062-.438T2 7t.438-1.062T3.5 5.5t1.063.438T5 7q0 .175-.038.325t-.087.275L8 9l3.125-4.275q-.275-.2-.45-.525t-.175-.7q0-.625.438-1.063T12 2t1.063.438T13.5 3.5q0 .375-.175.7t-.45.525L16 9l3.125-1.4q-.05-.125-.088-.275T19 7q0-.625.438-1.063T20.5 5.5t1.063.438T22 7t-.437 1.063T20.5 8.5q-.05 0-.112-.012t-.113-.013L19 16.5z" /></svg>
        <span class="ml-2 font-bold text-gray-700">超级会员</span>
        <span class="ml-2 text-black text-xs">· 每月享超值权益</span>
      </div>
      <div class="text-sm text-black hover:text-orange-600 cursor-pointer">
        <span>立即开通 ></span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>